<template>
  <view class="searchCardWrapper">
    <view class="cardTitle">
      <img :src="adv_title_icon" class="adv_title_icon" alt="" />
    </view>
    <view class="cardContainer">
      <view class="cardSearchInput">
        <view
          class="styleSearchInputModeContainer"
          @click="handleSalarySearchClick"
        >
          <view class="styleClearContainer">
            <image class="styleClearIcon" :src="srcInputSearchIcon"></image>
          </view>
          <!-- <u-input class="styleInput" placeholder="搜索专业或职业的名称" v-model="inputModeText" :clearable="false"
            :placeholder-style="placeholderStyle" maxlength="20" @focus="handleSalarySearchClick" /> -->
          <view class="fakeInput" @click="handleSalarySearchClick">
            搜索专业或职业的名称
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import inputSearchVue from "./inputSearch.vue";
import { addBuryingPoint } from "@/api/modules/career";
export default {
  components: { inputSearchVue },
  data() {
    return {
      hasClick: false,
      inputModeText: "",
      inputModeIsFocus: true,
      placeholderStyle:
        "color: rgba(0,0,0,0.25);font-weight:400;font-size:28rpx;",
      srcInputSearchIcon:
        this.$imgBaseSelf + "career/positionDictionary/input_search_icon.webp",
      adv_title_icon:
        this.$imgBaseSelf +
        "career/positionDictionary/adv_salary_title_icon.png",
      buryingPointId: "",
      cardType: "",
    };
  },
  onLoad(opt) {},
  created() {},
  methods: {
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "",
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType ? this.cardType : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
    handleSalarySearchClick() {
      this.addBuryingPointFn(20042, "", "", "", "");
      wx.reportEvent("search_salary_college_advertise_click", {}); //营销页—查薪酬(点击跳转到查职业页面)
      if (this.hasClick) {
        return;
      }
      this.hasClick = true;
      console.log("handleSalarySearchClick");

      uni.navigateTo({
        url: "/pagesSub/careerGrow/salarySearch/index",
      });
      setTimeout(() => {
        this.hasClick = false;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.searchCardWrapper {
  .cardTitle {
    display: flex;
    justify-content: center;
    width: 100%;
    .adv_title_icon {
      width: 270.9rpx;
      height: 71rpx;
    }
  }
  .cardContainer {
    width: 674rpx;
    // height: 1019rpx;
    background: linear-gradient(0deg, #79d4fe 0%, #478dfc 99%);
    border-radius: 24rpx;
    box-shadow: 0 0 0 4rpx #00e7ff, 0 0 0 8rpx #0a6cff;
    padding: 34rpx 34rpx 44rpx;
    .cardSearchInput {
      width: 100%;
      // margin: 0 auto;
      // margin-bottom: 42rpx;
    }
  }
}
.styleSearchInputModeContainer {
  display: flex;
  position: relative;
  height: 80rpx;
  background-color: #ffffff;
  margin-left: 32rpx;
  margin-right: 32rpx;
  box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(114, 165, 195, 0.3);
  border-radius: 40rpx;
  filter: blur(0px);
  margin-top: 4rpx;
  margin-bottom: 4rpx;
  .fakeInput {
    height: 80rpx;
    margin-left: 91rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100vw; // width: 100%;
    margin-right: 28rpx;
    color: rgba(0, 0, 0, 0.25);
    font-weight: 400;
    font-size: 28rpx;
  }
  .styleInput {
    height: 80rpx;
    margin-left: 91rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw; // width: 100%;
    margin-right: 28rpx;
  }

  .styleClearContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 28rpx;
    transform: translateY(-50%);

    .styleClearIcon {
      width: 32rpx;
      height: 32rpx;
    }

    .styleCancelText {
      font-weight: 400;
      color: #888888;
      line-height: 36rpx;
      font-size: 28rpx;
      margin-left: 12rpx;
    }
  }
}
</style>
